<script setup lang="ts">
import { ref } from 'vue'
import { healthCheck } from '@/api/healthController'

const healthStatus = ref<string>('')
const loading = ref<boolean>(false)
const error = ref<string>('')

const testHealthCheck = async () => {
  loading.value = true
  error.value = ''
  healthStatus.value = ''

  try {
    const res = await healthCheck()
    // 打印整个响应对象进行调试
    console.log('Health check response:', res)

    // 检查响应数据格式
    if (res && typeof res === 'object' && res.data) {
      const data = res.data
      healthStatus.value = `状态码: ${data.code ?? 'N/A'}, 消息: ${data.message ?? 'N/A'}, 数据: ${JSON.stringify(data.data ?? 'N/A')}`
    } else {
      healthStatus.value = '响应数据格式错误'
    }
  } catch (err) {
    error.value = '健康检查失败: ' + (err instanceof Error ? err.message : '未知错误')
    console.error('Health check error:', err)
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <div class="health-test">
    <h1>健康检查接口测试</h1>
    <a-button
      type="primary"
      @click="testHealthCheck"
      :loading="loading"
      :disabled="loading"
    >
      {{ loading ? '测试中...' : '测试健康检查接口' }}
    </a-button>

    <div class="result" v-if="healthStatus || error">
      <a-alert
        v-if="error"
        :message="error"
        type="error"
        show-icon
      />
      <a-alert
        v-else
        :message="healthStatus"
        type="success"
        show-icon
      />
    </div>
  </div>
</template>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* 统一动画变量 */
:root {
  --animation-duration-fast: 0.2s;
  --animation-duration-normal: 0.3s;
  --animation-duration-slow: 0.5s;
  --animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --animation-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* 动画定义 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.health-test {
  padding: 40px;
  max-width: 800px;
  margin: 0 auto;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  animation: fadeInUp 0.8s var(--animation-easing);
}

.health-test h1 {
  font-size: 32px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 40px;
  text-align: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: scaleIn 0.6s var(--animation-easing-bounce) 0.2s both;
}

.health-test :deep(.ant-btn) {
  height: 50px;
  padding: 0 32px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
  transition: all var(--animation-duration-normal) var(--animation-easing);
  animation: scaleIn 0.6s var(--animation-easing) 0.4s both;
}

.health-test :deep(.ant-btn):hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}

.health-test :deep(.ant-btn):active {
  transform: translateY(-1px) scale(1.02);
  transition: all 0.1s var(--animation-easing);
}

.result {
  margin-top: 32px;
  width: 100%;
  max-width: 600px;
  animation: fadeInUp 0.6s var(--animation-easing) 0.2s both;
}

.result :deep(.ant-alert) {
  border-radius: 16px;
  padding: 20px 24px;
  font-size: 15px;
  font-weight: 500;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: all var(--animation-duration-normal) var(--animation-easing);
}

.result :deep(.ant-alert-success) {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
}

.result :deep(.ant-alert-error) {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

.result :deep(.ant-alert):hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .health-test {
    padding: 24px 20px;
  }
  
  .health-test h1 {
    font-size: 24px;
    margin-bottom: 30px;
  }
  
  .health-test :deep(.ant-btn) {
    height: 44px;
    font-size: 14px;
    padding: 0 24px;
  }
}
</style>